/***
 *  非受控组件
 *   ref 绑定的如果是组件 获取到的就是组件实例对象
 *       绑定的如果是标签 获取到的就是DOM对象
 *  通过ref绑定获取DOM元素
 *   rcc 类组件中  使用ref 可以遵循以下步骤
 *   1、导入createRef
 *   2、生成一个ref属性
 *   3、绑定ref
 *   4、使用ref变量   xxx.current
 *
 */

import React, { Component, createRef } from 'react'

export default class extends Component {
  // 生成ref属性
  unameRef = createRef()
  upassRef = createRef()
  render() {
    return (
      <div>
        <div>
          <input type="text" placeholder="用户名" ref={this.unameRef} />
        </div>
        <div>
          <input type="password" placeholder="密码" ref={this.upassRef} />
        </div>
        <div>
          <button onClick={this.submit}>登录</button>
        </div>
      </div>
    )
  }
  submit = () => {
    // 点击提交时获取表单的值
    const username = this.unameRef.current.value
    const password = this.upassRef.current.value
    console.log({ username, password })
  }
}
